.singer {
    padding-top: 35px;
}
.singer_filter {
    padding: 10px 0 10px 20px;
    margin-bottom: 20px;
    box-shadow: var(--t-modal-shadow);
    background: var(--box-background);
    border-radius: var(--border-radius);
}
.filter_header {
    :global {
        .iconfont {
            display: inline-flex;
            width: 32px;
            height: 32px;
            margin-right: 10px;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: var(--t-text-color);
            vertical-align: top;
        }
    }
    
    span {
        display: inline-block;
        font-size: 16px;
        line-height: 32px;
        font-weight: bold;
    }
}

.filter_main {
    display: flex;
    flex-direction: column;
    font-size: 0;
    padding-top: 10px;

    .filter_item {
        margin-bottom: 15px;

        &:last-child {
            margin: 0;
        }
    }

    em {
        display: inline-block;
        min-width: 20px;
        font-size: 14px;
        font-style: normal;
        padding: 5px 0;
        position: relative;
        z-index: 1;
        display: inline-block;
        margin-right: 15px;
        font-style: normal;
        text-align: center;
        cursor: pointer;

        &:global(.active) {
            &::after {
                position: absolute;
                content: "";
                left: 0;
                bottom: 5px;
                width: 100%;
                height: 6px;
                background: var(--t-highlight-color);
                z-index: -1;
            }
        }
    }
}